<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <style>
            .fade-enter, .fade-leave-to { 
                opacity: 0;
            }
            .fade-enter-active, .fade-leave-active { 
                transition: opacity 1.5s ease; 
            }
        </style>
    </head>
    <body>
        <!-- 注册组件 -->
        <template id="example2">
            <span>我是注册组件</span>
        </template>
        <!-- 登录组件 -->
        <template id="example1">
            <span>我是登录组件</span>
        </template>
        <div id="app">
            <a href="javascript:;" @click="componentName='example1'">登录</a>
            <a href="javascript:;" @click="componentName='example2'">注册</a>
            <transition name="fade" mode="out-in">
                <component v-bind:is="componentName"></component>
            </transition>
        </div>
        <script>
            Vue.component('example1',{template:'#example1'});
            Vue.component('example2',{template:'#example2'});

            var vm = new Vue({
                el:'#app',
                data : {
                    componentName : ''
                }
            });
        </script>
    </body>
</html>